// pages/category/index.js
import { request } from "../../api/index.js"
import regeneratorRuntime from '../../lib/runtime/runtime';
Page({

  /**
   * 页面的初始数据
   */
  data: {
    cateLeftList: [],
    cateRightList: [],
    // 被点击的样式id
    isActive: 0,
    // 右侧内容的滚动条距离顶部的距离
    scrollTop: 0
  },
  Cates: [],
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    /*
   0 web中的本地存储和 小程序中的本地存储的区别
     1 写代码的方式不一样了
       web: localStorage.setItem("key","value") localStorage.getItem("key")
   小程序中: wx.setStorageSync("key", "value"); wx.getStorageSync("key");
     2:存的时候 有没有做类型转换
       web: 不管存入的是什么类型的数据，最终都会先调用以下 toString(),把数据变成了字符串 再存入进去
     小程序: 不存在 类型转换的这个操作 存什么类似的数据进去，获取的时候就是什么类型
   1 先判断一下本地存储中有没有旧的数据
     {time:Date.now(),data:[...]}
   2 没有旧数据 直接发送新请求
   3 有旧的数据 同时 旧的数据也没有过期 就使用 本地存储中的旧数据即可
    */
    const Cates = wx.getStorageSync("Cates");

    if (!Cates) {
      // 不存在 发送请求获取数据
      this.getCategories()
    } else {
      console.log("数据已存在");
      // 有旧的数据 定义过期时间
      if (Date.now() - Cates.time > 1000 * 10) {
        this.getCategories()
      } else {
        // 可以使用旧的数据
        this.Cates = Cates.data;
        this.getDetailList()
      }
    }

  },
  // 获取菜单栏数据 /categories
  async getCategories() {
    const { data: res } = await request({ url: "/categories" })
    // console.log(res.message);
    this.Cates = res.message;
    // 构造左侧的大菜单数据 
    // 把接口数据存入到本地存储中

    wx.setStorageSync("Cates", { time: Date.now(), data: this.Cates });

    this.getDetailList()
  },
  // 左侧菜单点击事件
  handleIndexId(e) {
    /*
   1 获取被点击的标题身上的索引
   2 给data中的currentIndex赋值就可以了
   3 根据不同的索引来渲染右侧的商品内容
    */
    // console.log(e.target.dataset);
    let { index } = e.target.dataset;
    let isActive = index;
    // console.log(e);
    // console.log(this.Cates);
    let cateRightList = this.Cates[index].children;
    this.setData({
      cateRightList,
      isActive,
      // 重新设置 右侧内容的scroll-view标签的距离顶部的距离
      scrollTop: 0
    })
  },

  // 封装左右菜单数据
  getDetailList() {
    let cateLeftList = this.Cates.map(v => v.cat_name)
    // console.log(cateLeftList);
    // 构造右侧内容
    let cateRightList = this.Cates[0].children;
    // categoriesList
    this.setData({
      cateLeftList,
      cateRightList
    })
  }


})